<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :confirmLoading="confirmLoading"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    :cancelText="$t('取消')"
    :okText="$t('保存')"
  >
    <a-form-model ref="form" :model="model" :rules="validatorRules">
      <a-row :gutter="24" align="middle" type="flex">
        <a-col :span="12">
          <a-form-model-item :label="$t('手机号')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
            <span>{{ model.memberPhone }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item :label="$t('卡号')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="chipNo">
            <span>{{ model.chipNo }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item :label="$t('姓名')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
            <span>{{ model.memberName }}</span>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-model-item :label="$t('票号')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ticketNo">
            <span>{{ model.ticketNo }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item :label="$t('票名称')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="goodsName">
            <span>{{ model.goodsName }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item :label="$t('总次数')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="totalNumber">
            <a-input v-model="model.totalNumber"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item :label="$t('剩余次数')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remainNumber">
            <a-input v-model="model.remainNumber"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item
            :label="$t('有效开始日期')"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="validityStart"
          >
            <a-date-picker
              :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              :placeholder="$t('请选择有效开始日期')"
              style="width: 100%"
              v-model="model.validityStart"
            ></a-date-picker>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item
            :label="$t('有效结束日期')"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="validityEnd"
          >
            <a-date-picker
              :show-time="{ defaultValue: moment('23:59:59', 'HH:mm:ss') }"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              :placeholder="$t('请选择有效结束日期')"
              style="width: 100%"
              v-model="model.validityEnd"
            ></a-date-picker>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </j-modal>
</template>
<script>
import moment from 'moment'
import { httpAction } from '@/api/manage'
export default {
  name: 'EditMemberTicketModal',
  data() {
    return {
      moment,
      title: this.$t('门票修正'),
      width: 900,
      visible: false,
      disableSubmit: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      model: {},
      validatorRules: {
        totalNumber: [
          { required: true,message:this.$t('总次数不能为空') }
        ],
        remainNumber: [
          { required: true,message:this.$t('剩余次数不能为空') },
          {
            validator: this.validateRemainNumber,
          },
        ]
      },
      url: {
        edit: '/member/bisMemberTicket/edit',
      },
    }
  },
  methods: {
    edit(record) {
      let that = this
      that.confirmLoading = false
      that.model = Object.assign({}, record)
      /* if (that.model.validityEnd) {
        that.validatorRules.validityEnd = [{ required: true, message: this.$t('请选择有效结束日期') }]
      }
      if (that.model.validityEnd) {
        that.validatorRules.validityEnd = [{ required: true, message: this.$t('请选择有效结束日期') }]
      } */
      that.visible = true
    },
    handleOk() {
      let that = this
      // 触发表单验证
      that.$refs.form.validate((valid) => {
        if (valid) {
          if(that.model.validityStart&&!that.model.validityEnd){
            that.$message.warn(that.$t('请选择有效结束日期'))
            return
          }
          if(that.model.validityEnd&&!that.model.validityStart){
            that.$message.warn(that.$t('请选择有效开始日期'))
            return
          }
          that.confirmLoading = true
          let httpurl = that.url.edit
          let method = 'put'
          let query = Object.assign({}, that.model)
          httpAction(httpurl, query, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
                that.visible = false
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    validateRemainNumber(rule, value, callback) {
      if (
        parseInt(this.model.totalNumber) != 0 &&
        parseInt(this.model.remainNumber) > parseInt(this.model.totalNumber)
      ) {
        callback(this.$t('有效次数不允许超过该门票的总次数'))
      }
      callback()
    },
  },
}
</script>

<style>
</style>